<template>
	<div class="child3">
		<h3>子组件03</h3>
<!--    事件名称 与 自定义事件名称不能起冲突-->
    <button @click="sendMsg">发送消息给父组件</button>
    <button @click="offEmit">解绑事件</button>
	</div>
</template>

<script>
	export default {
		name:'child3-component',
		data(){
			return {
				msg:'--组件03的消息--'
			}
		},
    methods:{
      sendMsg(){
        console.log(123)
        this.$emit('sendMsg2',this.msg)
      },
      offEmit(){
        //解绑一个自定义事件
        // this.$off('sendMsg2')
        //解绑多个自定义事件
        this.$off(['sendMsg2'])
        //解绑所有的自定义事件
        // this.$off()

        //扩展：1、当组件被销毁（$destroy）时，会触发解绑事件，使其无法再执行组件事件内容
        //     2、当组件被销毁（$destroy）时，并不能对原生DOM事件产生影响
      }
    }
	}
</script>

<style>
.child3{
  background: #2c3e50;
  color: white;
}
</style>